<template>
	<view>
		<uni-search-bar v-model="productName" clearButton="auto" cancelButton="none" radius="20"
			@confirm="search" @clear="cancel_search" bgColor="#fff" placeholder="输入商品名称搜索">
		</uni-search-bar>
		<view class="bg-white padding-tb-sm" v-if="select.show">
			<filter-shop :current="select.current" :list="select.list" v-on:select_change="select_change"></filter-shop>
		</view>
		<view class="text-df bg-white margin-top-com padding-sm border-radius" v-for="(item,index) in exchange_list"
			:key="index" style="box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);padding: 10px;width: 90%;margin-left: 5%" @click="to_detail(item.id)">
			<view class="flex-row-bt">
				<view class="text-low text-sm">订单号：{{item.id}}</view>
				<view v-if="item.status==0" class="theme-color">等待付款</view>
				<view v-else class="text-low">等待发货</view>
			</view>
			<view v-for="(good,good_index) in item.goods" :key="good_index" class="margin-top-sm flex-row-bt">
				<view class="flex-row">
					<image :src="good.img" mode="aspectFill"
						style="width: 200rpx; height: 180rpx; border-radius: 20rpx;" class=""></image>
					<view style="width: 400rpx;" class="margin-left-xs padding-tb-xs">
						<!-- <view class="text-lg">{{good.title}}</view>
						<view class=" text-sm text-low margin-top-lg">订单号： {{}}</view> -->
						<view class="flex-row-bt ">
							<view class="text-lg">{{good.title}}</view>
							<view class="text-lg theme-color text-bold ">￥{{good.point}}</view>
						</view>
						<view class="flex-row-bt text-sm text-low margin-top-lg">
							<view class="">{{good.type}} , {{good.size}}</view>
							<view class="">×{{good.num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 20px;background: #FDF2F1;color: rgba(0, 0, 0, 0.45);display: flex;align-items: center;margin-top: 8px;">
				<view style="font-size: 10px;margin-left: 5px;">{{item.text}}</view>
			</view>
			<view class="flex-row-bt margin-top-sm">
				<view class="flex-row">
					<text class="text-low text-sm" style="line-height: 50rpx;">总共：</text>
					<text class="text-lg theme-color text-bold ">￥{{item.total_point}}</text>
				</view>

				<!-- 待付款 -->
				<view class="flex-row" v-if="item.status==0">
					<view class="text-low text-sm margin-right-sm order-butten">
						取消订单
					</view>
		<!-- 			<view class="text-low text-sm margin-right-sm order-butten">
						修改地址
					</view> -->
					<view class="theme-color text-sm border-radius order-butten-red">
						继续付款
					</view>
				</view>

				<!-- 待发货 -->
				<view class="flex-row" v-if="item.status==1">
					<view class="text-low text-sm order-butten">
						取消订单
					</view>
				</view>

				<!-- 待收货 -->
				<view class="flex-row" v-if="item.status==2">
					<view class="text-low text-sm margin-right-sm order-butten">
						取消订单
					</view>
					<view class="theme-color text-sm  border-radius order-butten-red">
					  确认收货
					</view>
				</view>

			</view>

		</view>

		<!-- 分割线 -->
		<divider marginTop="40px" marginBottom="40px"></divider>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"

	const select = reactive({
		current: 1,
		show: false,
		list: [{
			name: '全部',
			isLifting: false //是否升降排序
		}, {
			name: '待付款',
			isLifting: false //是否升降排序
		}, {
			name: '待发货',
			isLifting: false //是否升降排序
		}, {
			name: '待收货',
			isLifting: false //是否升降排序
		}, {
			name: '退款',
			isLifting: false //是否升降排序
		}]
	})
	const productName = ref(null)
	const exchange_list = ref([{
		time: '2024年3月2日 09：01',
		total_point: 123,
		status: 0,
		text:"交易成功：订单已完成，欢迎再次下单…",
		id: '954663155325662256',
		goods: [{
			title: '铭文贸易',
			img: 'https://api.anred.qrsk.net/admin/profile/product/2024/05/10/OIP-C (10)_20240510162922A005.jpg',
			point: 123,
			num: 1,
			type: '咖色',
			size: 'M码',
		}]
	}, {
		time: '2024年3月2日 09：01',
		total_point: 123,
		text:"待付款：付款时间还剩59：23：43 请尽快付款",
		status: 1,
		id: '9745654123542335123',
		goods: [{
			title: '铭文贸易',
			img: 'https://api.anred.qrsk.net/admin/profile/product/2024/05/10/OIP-C (10)_20240510162922A005.jpg',
			point: 123,
			num: 1,
			type: '咖色',
			size: 'M码',
		}]
	}, {
		time: '2024年3月2日 09：01',
		total_point: 345,
		status: 2,
		text:"待发货：商家正努力备货中，小主请耐心哟…",
		id: '336238555552256666366',
		goods: [{
			title: '铭文贸易',
			img: 'https://api.anred.qrsk.net/admin/profile/product/2024/05/10/OIP-C (10)_20240510162922A005.jpg',
			point: 123,
			num: 1,
			type: '咖色',
			size: 'M码',
		}, {
			title: '铭文贸易',
			img: 'https://api.anred.qrsk.net/admin/profile/product/2024/05/10/OIP-C (10)_20240510162922A005.jpg',
			point: 123,
			num: 1,
			type: '咖色',
			size: 'M码',
		}]
	}])

	onLoad((option) => {
		select.current = parseInt(option.index)
		select.show = true
	})


	const select_change = (e) => {
		console.log(JSON.stringify(e))
	}
	//搜索
	const search = () => {
		// bottom_param.current = 1
		// waterfall.list = [];
		// Waterfall.value.clear();
		// waterfall.list1 = [];
		// waterfall.list2 = [];
		// getExchangeProduct(bottom_param).then((res : any) => {
		// 	waterfall.list = JSON.parse(JSON.stringify(res.data.list))
		// })
	}

	//取消搜索
	const cancel_search = () => {
		// bottom_param.current = 1
		// bottom_param.productName = ''
		// waterfall.list = [];
		// Waterfall.value.clear();
		// waterfall.list1 = [];
		// waterfall.list2 = [];
		// getExchangeProduct(bottom_param).then((res : any) => {
		// 	waterfall.list = JSON.parse(JSON.stringify(res.data.list))
		// })
	}
	//详情
	const to_detail = (e) => {
		uni.navigateTo({
			url: '/pages/mines/my_order/detail?id='+e
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.order-butten{
		width: 60px;
		height: 25px;
		background: #F9B9BE;
		font-size: 10.2px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #DE483D;
		border-radius: 5px;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
	}
	.order-butten-red{
		width: 60px;
		height: 25px;
		background: #DE483D;
		font-size: 10.2px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 5px;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
	}
</style>
